// 营销成本
<template>
  <div class="market-cost-box">
    <div class="padding-bottom-10 flex justify-between">
      <span class="font-weight-700 font-size-18">营销成本</span>
      <span>合同期总计：{{ allMoney | moneyFilterNoUnit }}元</span>
    </div>

    <el-table :border="false" :data="tableList" class="new-table-style">
      <el-table-column align="left" label="资产名称" prop="shopName"> </el-table-column>
      <el-table-column align="center" label="事项" prop="itemName"> </el-table-column>
      <el-table-column align="center" label="合同期总成本" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.amount | moneyFilterNoUnit }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="成本计算说明" prop="calculationDesc" width="700"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    props: {
      tableList: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },

    data() {
      return {
        contractType: this.$route.query.contractType,
      };
    },

    computed: {
      allMoney() {
        this.tableList = this.tableList || [];
        let sum = this.tableList.reduce((prev, item) => {
          prev += item.amount;
          return prev;
        }, 0);
        return sum;
      },
    },

    mounted() {},

    methods: {},
  };
</script>

<style lang="scss" scoped>
  .market-cost-box {
    position: relative;
  }

  ::v-deep .el-collapse-item__header {
    font-size: 18px;
    font-weight: 700;
  }

  .total-num-box {
    position: absolute;
    right: 40px;
    top: 13px;
  }
</style>
